<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态路由配置</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <h1>嵌套命名视图</h1>
    <router-view></router-view>
</div>
<script>
    // template
    const UserSettingsNav = {
        template: `
            <div>
                <router-link to="/settings/emails">emails</router-link><br>
                <router-link to="/settings/profile">profile</router-link>
            </div>
        `
    }

    const UserSettings = {
        template: `
            <div>
                <h2>User Settings</h2>
                <UserSettingsNav/>
                <router-view/>
                <router-view name="helper"/>
            </div>
        `,
        components: {
            UserSettingsNav
        }
    }

    const UserEmailsSubscriptions = {
        template: `
            <div>
                <h3>Email Subscriptions</h3>
            </div>
        `
    }

    const UserProfile = {
        template: `
            <div>
                <h3>Edit your profile</h3>
            </div>
        `
    }

    const UserProfilePreview = {
        template: `
            <div>
                <h3>Preview of your profile</h3>
            </div>
        `
    }

    const Foo = {template: `<div>Foo</div>`}
    const Bar = {template: `<div>Bar</div>`}
    const Baz = {template: `<div>Baz</div>`}

    // router
    const router = new VueRouter({
        routes: [
            {
                path: '/settings',
                component: UserSettings,
                children: [{
                    path: 'emails',
                    component: UserEmailsSubscriptions
                }, {
                    path: 'profile',
                    components: {
                        default: UserProfile,
                        helper: UserProfilePreview
                    }
                }]
            }, {
                path: '/other',
                components: {
                    default: Baz,
                    a: Bar,
                    b: Foo
                }
            }
        ]
    })
    router.push('/settings/emails')
    // mount to vue
    const app = new Vue({
        router,
        el: '#app'
    })
</script>
</body>
</html>
